import React, { Component, Fragment } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { px2dp } from '@/styles';

/**
 * @author kanglang
 * @description 行
 * @createDate 2020/8/18
 *
 */
export default class ConRow extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const { leftTitle, rightContent, unit, style, key } = this.props;
    return (
      <View style={[styles.rowsWrap, style]} key={key}>
        <View style={styles.leftColum}>
          <Text style={styles.leftTitleStyle}>{leftTitle}</Text>
        </View>
        <View style={styles.rightColum}>
          <Text style={styles.rightContentStyle}>{rightContent}</Text>
          <Text style={styles.rightContentStyle}>{unit}</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  rowsWrap: {
    flex: 1,
    width: '100%',
    minHeight: px2dp(40) * 2,
    flexDirection: 'row',
    backgroundColor: '#FFFFFF',
    alignItems: 'center',
    borderColor: '#E6E6E5',
    borderLeftWidth: px2dp(1),
    borderTopWidth: px2dp(1),
    borderRightWidth: px2dp(1),
    flexWrap: 'wrap'
  },
  leftColum: {
    flex: 1,
    height: '100%',
    justifyContent: 'center',
    backgroundColor: '#FAFAF9',
    paddingLeft: px2dp(16) * 2,
    borderRightWidth: px2dp(1),
    borderRightColor: '#E6E6E5'
  },
  rightColum: {
    flex: 2,
    height: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    padding: px2dp(12) * 2
  },
  leftTitleStyle: {
    color: '#666562',
    fontSize: px2dp(14) * 2
  },
  rightContentStyle: {
    color: '#333232',
    fontSize: px2dp(14) * 2
  }
});
